<template>
    <div>
        <!-- 卡片 -->
        <div class="big">
            <div class="sj_kpmin" v-for="(item,index) in arr" :key="index">
                 <el-card shadow="hover">
                       <div class="del" @click="del(item.product_id)">删除</div>
                     <img :src="'http://106.15.179.105:3000/'+item.product_picture" class="sj_img"   @click="$router.push('/sjxq?id='+item.product_id)">
                      <p style="text-align: center;height:50px">{{item.product_name}}</p>
                      <div style="font-size:12px;text-align: center;color:gray;margin-top:10px;height:30px" @click="$router.push('/sjxq?id='+item.product_id)">{{item.product_title}}</div>
                      <div style="text-align: center;margin-top:20px;font-size:18px;margin-bottom:12px" @click="$router.push('/sjxq?id='+item.product_id)">
                          <span style="color:#ff6700">{{item.product_selling_price}}元&ensp;</span>
                          <s v-if="item.product_selling_price!==item.product_price" style="color:gray">{{item.product_price}}元</s>
                      </div>
                 </el-card>
                </div>
        </div>
       
        <!-- 卡片 -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr:[]
        };
    },

    mounted() {
        this.add()
    },

    methods: {
        async add(){
            let user_id=this.$store.state.user_id
            let {data}=await this.$axios.post("api/user/collect/getCollect",{user_id:user_id})
            console.log(data,"88")
            this.arr=data.collectList
        },
        async del(product_id){
            // let user_id=this.$store.state.user_id
            // let {data}=await this.$axios.post("api/user/collect/deleteCollect",{user_id:user_id, product_id:product_id})
            // console.log(data.msg)
             this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             let user_id=this.$store.state.user_id
              this.$axios.post("api/user/collect/deleteCollect",{user_id:user_id, product_id:product_id}).then((res)=>{
                  this.add();
                   this.$message({
            type: 'success',
            message:res.data.msg
          });
              })
            
        }).catch(() => {
          this.$message({
            type: 'info',
            message:"已取消删除"
          });          
        });
        }
    },
};
</script>

<style scoped>
.big{
    width: 100%;
    min-height: 500px;
    display: flex;
    flex-wrap: wrap;
}
.sj_kpmin{
    width: 22%;
    height: 421px;
    background-color: pink;
    margin-left: 1%;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom:10px ;
    position: relative;
}
.sj_kpmin:hover .del{
    display: block;
}
.del{
    color: red;
    width: 50px;
    height: 20px;
    text-align: center;
    /* background-color: pink; */
    position: absolute;
    top: 10px;
    right: 20px;
    display: none;
}
.del:hover{
    color: #0af;
}
</style>